<template>
	<div class="applyForAfterSalesTypeContent">
		<!--占位-->
		<div class="placeholder"></div>
		<!--单号时间-->
		<ul class="waybilltime">
			<li class="fix">
				<div class="waybilltime_title fl">退货单号：</div>
				<div class="waybilltime_waybilltime fl">{{waybilltimeWaybill}}</div>
			</li>
			<li class="fix">
				<div class="waybilltime_title fl">申请时间：</div>
				<div class="waybilltime_waybilltime fl">￥{{waybilltimeTime}}</div>
			</li>
		</ul>
		<!--商品-->
		<div class="goods fix">
			<img class="goodsimg fl" src="">
			<div class="goodsright fl fix">
				<div class="goodsright_title">{{goodsTitle}}</div>
				<div class="goodsright_num fl">{{goodsNum}}件</div>
				<div class="goodsright_describe fl">仅退款</div>
			</div>
		</div>
		<div class="goods fix">
			<img class="goodsimg fl" src="">
			<div class="goodsright fl fix">
				<div class="goodsright_title">{{goodsTitle}}</div>
				<div class="goodsright_num fl">{{goodsNum}}件</div>
				<div class="goodsright_describe fl">退货退款</div>
			</div>
		</div>
		<div class="goods fix">
			<img class="goodsimg fl" src="">
			<div class="goodsright fl fix">
				<div class="goodsright_title">{{goodsTitle}}</div>
				<div class="goodsright_num fl">{{goodsNum}}件</div>
				<div class="goodsright_describe fl">换货</div>
			</div>
		</div>
		<!--审核状态-->
		<div class="state">
			<img class="state_img" src="../assets/image/pic_under_review@2x.png">
			<div class="state_state">申请提交成功，商家审核中...</div>
			<div class="state_describe">售后申请提交后，商家会在1到3个工作日内容进行审核， 请耐心等候~</div>
		</div>
		<div class="state">
			<img class="state_img" src="../assets/image/pic_pass_the_audit@2x.png">
			<div class="state_state">审核通过</div>
			<div class="state_describe">退款申请已通过审核，财务会在1-3个工作日将退款按照原来支付路径退款到您的账户中，请注意查收。</div>
		</div>
		<div class="state">
			<img class="state_img" src="../assets/image/pic_succeed@2x.png">
			<div class="state_state">成功退款！</div>
			<div class="state_state hidden">商品已通过验收，已成功退款!</div>
			<div class="state_money">退款金额：<span>{{stateMoney}}元</span></div>
			<div class="state_describe">平台已按照原来支付路径退款到您的账户中，请注意查收。</div>
		</div>
		<div class="state">
			<img class="state_img" src="../assets/image/pic_under_review@2x.png">
			<div class="state_state">申请提交成功，平台审核中...</div>
			<div class="state_describe">售后申请提交后，平台会在1到3个工作日内容进行审核， 请耐心等候~</div>
		</div>
		<!--郭郭开始-->
		<div class="state">
			<img class="state_img" src="../assets/image/ico_paid@2x.png">
			<div class="state_state">商品已寄出，等待商家收货中...</div>
			<div class="state_describe">商家收到寄回商品，检验通过验收后会尽快更换新商品发出，请耐心等待。</div>
		</div>
		<div class="state">
			<img class="state_img" src="../assets/image/pic-_send-off@2x.png">
			<div class="state_state">商品已寄出，等待商家收货中...</div>
			<div class="state_describe">商家收到寄回商品，检验通过验收后会尽快更换新商品发出，请耐心等待。</div>
		</div>
		<div class="state">
			<img class="state_img" src="../assets/image/pic-_barter@2x.png">
			<div class="state_state">商品已通过验收，换货已发出!</div>
			<div class="state_describe">您寄回商品平台已收到并通过验收，更换新商品已发货，发货物流信息如下</div>
		</div>
		<div class="state">
			<img class="state_img" src="../assets/image/pic-_await@2x.png">
			<div class="state_state">等待验货</div>
			<div class="state_describe">您已申请到店退货，请在7天内到店退货，否则申请将会被取消！</div>
		</div>
		<div class="state">
			<img class="state_img" src="../assets/image/pic-_barter@2x.png">
			<div class="state_state">商品已通过验收，换货已发出!</div>
		</div>
		<div class="store-msg">
			<p class="clear"><span class="title fl">门店名称：</span><span class="content fl">茜诗迪官方旗舰店</span></p>
			<p class="clear"><span class="title fl">门店电话：</span><span class="content phoneNum fl">0799-6814455</span></p>
			<p class="clear"><span class="title fl">门店地址：</span><span class="content fl">广东省深圳市南山区阳光科创广东省深圳市南山区阳光科创</span></p>
			<p class="clear"><span class="title fl">营业时间：</span><span class="content fl">周一、周二、周三、周四(10:00~22:00);周五(10:00~22:30); 周日(10:00~22:00)。</span></p>
		</div>
		<!--郭郭结束-->
		<div class="state">
			<img class="state_img" src="../assets/image/pic_pass_the_audit@2x.png">
			<div class="state_state">售后审核通过！</div>
			<div class="state_money">倒计时：6天23小时59分</div>
			<div class="state_describe">您的售后申请已通过审核，请在7个工作日内将商品寄回到以下地址，并提交寄回物流信息，否则该申请将会被取消。</div>
		</div>
		<!--信息-->
		<img class="line" src="../assets/image/line_add@2x.png">
		<ul class="information">
			<li class="information_li fix">
				<div class="information_title fl">收货人姓名：</div>
				<div class="information_information fl">{{informationName}}</div>
			</li>
			<li class="information_li fix">
				<div class="information_title fl">联系手机号：</div>
				<div class="information_information red fl">{{informationPhone}}</div>
			</li>
			<li class="information_li fix">
				<div class="information_title fl">寄回地址：</div>
				<div class="information_information fl">{{informationAddress}}</div>
			</li>
		</ul>
		<!--审核状态-->
		<div class="state">
			<img class="state_img" src="../assets/image/pic_set@2x.png">
			<div class="state_state">商品已寄出，等待商家收货中…</div>
			<div class="state_describe">商家收到寄回商品，检验通过验收后会尽快更换新商品发出，请耐心等待。</div>
		</div>
		<div class="state">
			<img class="state_img" src="../assets/image/pic_succeed@2x.png">
			<div class="state_state">商品已通过验收，已成功退款!</div>
			<div class="state_money">退款金额：<span>{{stateMoney}}元</span></div>
			<div class="state_describe">平台已按照原来支付路径退款到您的账户中，请注意查收。</div>
		</div>
		<div class="state">
			<img class="state_img" src="../assets/image/pic_await@2x.png">
			<div class="state_state">等待验货</div>
			<div class="state_describe">您已申请到店退货，请在7天内到店退货，否则申请将会被取消！</div>
		</div>
		<!--信息-->
		<ul class="information">
			<li class="information_li fix">
				<div class="information_title fl">门店名称：</div>
				<div class="information_information fl">{{informationName}}</div>
			</li>
			<li class="information_li fix">
				<div class="information_title fl">门店电话：</div>
				<div class="information_information red fl">{{informationPhone}}</div>
			</li>
			<li class="information_li fix">
				<div class="information_title fl">门店地址：</div>
				<div class="information_information fl">{{informationAddress}}</div>
			</li>
			<li class="information_li fix">
				<div class="information_title fl">营业时间：</div>
				<div class="information_information time fl">{{informationTime}}</div>
			</li>
		</ul>
		<!--审核状态-->
		<div class="state">
			<img class="state_img" src="../assets/image/pic_barter@2x.png">
			<div class="state_state">商品已通过验收，换货已发出!!</div>
			<div class="state_describe">您寄回商品平台已收到并通过验收，更换新商品已发货，发货物流信息如下</div>
		</div>
		<!--信息-->
		<ul class="information">
			<li class="information_li fix">
				<div class="information_title fl">物流公司：</div>
				<div class="information_information fl">{{orderCompany}}</div>
			</li>
			<li class="information_li fix">
				<div class="information_title fl">快递单号：</div>
				<div class="information_information red fl">{{orderNum}}</div>
			</li>
		</ul>
		<!--审核状态-->
		<div class="state">
			<img class="state_img" src="../assets/image/pic_barter@2x.png">
			<div class="state_state">商品已通过验收，换货已发出!!</div>
		</div>
		<!--占位-->
		<div class="placeholder2"></div>
		<!--添加物流信息-->
		<router-link to="/" class="addinformation">添加物流信息</router-link>
	</div>
</template>
<script type="text/javascript">
import Vue from 'vue'

export default {
	name: 'app',
	data () {
		return {
			waybilltimeWaybill:'4646461461651561616',
			waybilltimeTime:'2017-05-20 18:00:00',
			goodsTitle:'乐町2017夏季新款女装绿色短款刺绣宽松短袖宽松宽松短袖T恤女夏韩版纯色上衣',
			goodsNum:'1',
			stateMoney:'80.00',
			informationName:'老赵头',
			informationPhone:'17727939936',
			informationAddress:'广东省深圳市南山区海天二路A8音乐大厦9楼',
			informationTime:'周一、周二、周三、周四(10:00~22:00); 周五(10:00~22:30); 周日(10:00~22:00)。',
			orderCompany:'顺丰快递',
			orderNum:'4565465465',
		}
	},
	methods:{
	}
}
</script>
<style lang="scss">
.applyForAfterSalesTypeContent{
	// 占位
	.placeholder{ height: 0.2rem; }
	// 单号时间
	.waybilltime{ padding: 0.2rem 0.3rem; background: #fff; }
	.waybilltime_title{ padding-right: 0.32rem; line-height: 0.5rem; font-size: 0.28rem; color: #333; }
	.waybilltime_waybilltime{ line-height: 0.5rem; font-size: 0.32rem; color: #333; }
	// 商品
	.goods{ margin-top: 0.2rem; padding: 0 0.3rem; height: 1.74rem; background: #fff; }
	.goodsimg{ margin-top: 0.2rem; width: 1.34rem; height: 1.34rem; background: #eee; }
	.goodsright{
		padding-left: 0.16rem; width: 5.4rem; height: 1.54rem; position: relative;
		.goodsright_title{ padding-top: 0.16rem; line-height: 0.36rem; font-size: 0.24rem; color: #333; }
		.goodsright_num{ padding-top: 0.38rem; height: 0.24rem; line-height: 0.24rem; font-size: 0.24rem; color: #ff365d; }
		.goodsright_describe{ padding: 0.38rem 0 0 0.4rem; height: 0.24rem; line-height: 0.24rem; font-size: 0.24rem; color: #ff365d; }
	}
	// 审核状态
	.state{ margin-top: 0.2rem; padding: 0.3rem; background: #fff; }
	.state_img{ display: block; margin: 0 auto; width: auto; height: 2rem; }
	.state_img{ display: block; margin: 0 auto; width: 2rem; height: 2rem; }
	.state_state{ padding-top: 0.3rem; height: 0.32rem; line-height: 0.32rem; text-align: center; font-size: 0.32rem; color: #151517; }
	.state_money{
		padding-top: 0.2rem; height: 0.28rem; line-height: 0.28rem; text-align: center; font-size: 0.28rem; color: #666;
		span{ font-size: 0.28rem; color: #ff365d; }
	}
	.state_describe{ padding-top: 0.16rem; line-height: 0.38rem; font-size: 0.24rem; color: #666; }
	.store-msg{
		background: #fff;
		p{
			 padding:0.12rem 0 0.12rem 0.3rem; width: 100%; border-top: 0.04rem solid #f4f5f5;
			.title{ line-height: 0.38rem; font-size: 0.24rem; color: #666;}
			.content{ padding-left: 0.48rem; width: 4.5rem; line-height: 0.38rem; font-size: 0.24rem; color: #333; }
			.phoneNum{ color: #ff365d; }
		}
	}
	// 信息
	.line{ display: block; width: 100%; height: 0.06rem; }
	.information{}
	.information_li{ margin-top: 0.04rem; padding: 0 0.3rem; background: #fff; }
	.information_title{ width: 1.5rem; line-height: 0.6rem; font-size: 0.24rem; color: #666; }
	.information_information{ width: 5.4rem; line-height: 0.6rem; font-size: 0.24rem; color: #333; }
	.red{ color: #ff365d; }
	.time{ width: 4.5rem; }
	// 占位
	.placeholder2{ height: 1.84rem; }
	// 添加物流信息
	.addinformation{ width: 100%; height: 0.98rem; line-height: 0.98rem; text-align: center; font-size: 0.3rem; color: #fefefe; background: linear-gradient(to right,#fe4a6b,#e8163f); position: fixed; left: 0; bottom: 0; z-index: 20; }
}
</style>
